<template>
	<view class="">
		<view class="center-top-pane">
			<view class="action-group" style="font-size: 54rpx;">
				<text class="iconfont icon-mingpianfenxiang " @click="$u.route('/pages/subpage/about/mpShare')"></text>
				<text class="iconfont icon-shezhi u-m-l-30 " @click="$u.route('/pages/subpage/setting/index')"></text>
			</view>
			<view class="info-view">
				<u-avatar src="/static/avatar-d.png" :size="116" v-if="!isLogin"></u-avatar>
				<u-avatar :src="user.avatar" :size="116" :show-level="user.is_power==1" :level-bg-color="config.mainColor"
					v-else></u-avatar>
				<view class="u-m-l-20  u-font-36">
					<!-- #ifdef MP -->
					<button class="u-reset-button white" :customStyle="{dispaly:'inline-block',}" v-if="!isLogin"
						open-type="getPhoneNumber|agreePrivacyAuthorization" @getphonenumber="getPhoneNumber" @click="login">
						请登录
					</button>
					<!-- #endif -->
					<!-- #ifdef APP || H5-->
					<button class="u-reset-button white" :customStyle="{dispaly:'inline-block',}" v-if="!isLogin" @tap="login">
						请登录
					</button>
					<!-- #endif -->
					<view class="u-font-36 font-medium white" v-else>{{user.nickname}}</view>
					<view class="font-medium white u-m-t-10" v-if="isLogin&&user.is_real">
						<bb-tag></bb-tag>
					</view>
				</view>
				<view class="u-font-28 white u-flex-1 align-right" @click="toMyProfile" v-if="isLogin">
					我的主页
					<text class="iconfont icon-you u-m-l-10"></text>
				</view>
			</view>
		</view>

		<view class="center-content">
			<view class="nav-view">
				<u-grid :col="4" :border="false" @click="navtoPage">
					<u-grid-item v-for="(item,index) in aboutMe" :key="index" :index="item.path">
						<text class="font-medium u-font-34">{{item.num}}</text>
						<view class="grid-text u-m-t-12">{{item.title}}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="nav-view">
				<view class="nav-view-title">
					交易中心
				</view>
				<u-grid :col="4" :border="false" @click="navtoPage">
					<u-grid-item v-for="(item,index) in navOrder" :key="index" :index="item.path">
						<u-badge :count="item.count" :offset="[20, 20]"></u-badge>
						<image :src="'/static/icon/'+item.icon+'.png'" mode="aspectFill" style="width: 50rpx;height: 50rpx;">
						</image>
						<view class="grid-text u-m-t-12">{{item.title}}</view>
					</u-grid-item>
				</u-grid>
			</view>

			<view class="nav-view">
				<view class="nav-view-title">
					管理中心
				</view>
				<u-grid :col="4" :border="false" @click="navtoPage">
					<template v-for="(item,index) in navManager">
						<u-grid-item :key="index" :index="item.path">
							<u-badge :count="item.count" :offset="[20, 20]"></u-badge>
							<image :src="'/static/icon/'+item.icon+'.png'" mode="aspectFill" style="width: 50rpx;height: 50rpx;">
							</image>
							<view class="grid-text u-m-t-12">{{item.title}}</view>
						</u-grid-item>
					</template>

				</u-grid>
			</view>

			<view class="nav-view">
				<view class="nav-view-title">
					更多
				</view>
				<u-grid :col="4" :border="false" @click="navtoPageApp">
					<u-grid-item v-for="(item,index) in navMore" :key="index" :index="index">
						<image :src="'/static/icon/'+item.icon+'.png'" mode="aspectFill" style="width: 50rpx;height: 50rpx;">
						</image>
						<view class="grid-text u-m-t-12">{{item.title}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		aboutMe,
		navOrder,
		navManager,
		navMore
	} from '@/common/enum.js';
	import common from '@/utils/wxApplet/common.js'
	export default {
		data() {
			return {
				title: 'Hello',
				aboutMe: aboutMe,
				navOrder: navOrder,
				navManager: navManager,
				navMore: navMore,
				config: this.$appConfig
			}
		},
		computed: {
			user() {
				const info = this.$store.state.vuex_userInfo
				return info
			},
			isLogin() {
				const info = this.$store.state.vuex_token
				return !!info
			}
		},
		onShow() {
			this.queryUserInfo()
		},
		onLoad() {

		},
		methods: {
			navtoPage(path) {
				if (this.user.is_real) {
					path && this.$u.route(path)
				} else {
					this.$u.route('/pages/subpage/profile/autonym')
				}
			},
			getPhoneNumber(e) {
				common.getPhoneNumber(e).then(res => {
					// console.log(res);
					if (!res) {
						this.$u.toast("您拒绝了授权登录")
						return
					}
					common.getUserInfo().then(resp => {
						if (!resp.is_gen) {
							uni.showModal({
								content: '为了更精准的给您提供相关服务，请完善您的个人资料',
								showCancel: true,
								confirmText: '前往',
								confirmColor: this.config.mainColor,
								success: (res) => {
									if (res.confirm) {
										this.$u.route('pages/subpage/profile/profile')
									}
								}
							})
						}
					})
				}).catch(err => {
					uni.showModal({
						content: JSON.stringify(err)
					})
				})
			},
			async queryUserInfo() {
				if (this.isLogin) {
					await common.getUserInfo()
					const {
						orderStatusNum,
						follow,
						visit
					} = this.$store.state.vuex_userInfo;
					this.navOrder[0].count = orderStatusNum.buy_count
					this.navOrder[1].count = orderStatusNum.sale_count
					this.navOrder[2].count = orderStatusNum.apply_count
					this.navManager[0].count = orderStatusNum.demand_count
					this.aboutMe[2].num = follow.follow_me
					this.aboutMe[3].num = follow.my_follow
					this.aboutMe[0].num = visit.my_visit
					this.aboutMe[1].num = visit.visit_me
				}
			},
			toMyProfile() {
				this.$u.route('/pages/subpage/profile/index', {
					id: this.user.uid
				})
			},
			login() {
				// #ifdef APP-PLUS
				this.$u.route('/pages/subpage/login/oneBtnLogin')
				// #endif
			},
			navtoPageApp(index) {
				if (!this.navMore[index].auth || this.user.is_real) {
					this.$u.route(this.navMore[index].path)
				} else {
					this.$u.route('/pages/subpage/profile/autonym')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center-top-pane {
		height: 442rpx;
		background: linear-gradient(-10deg, $u-type-primary-light 0%, $u-type-primary 78%, $u-type-primary 180%);
		overflow: hidden;
		padding: 30rpx;

		.action-group {
			margin-top: 140rpx;
			text-align: right;
			color: #ffffff;
		}

		.info-view {
			display: flex;
			align-items: center;
		}
	}

	.center-content {
		padding: 0 30rpx;
		position: relative;
		z-index: 99;
		transform: translateY(-65rpx);

		.nav-view {
			background-color: white;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			overflow: hidden;

			.nav-view-title {
				font-size: 34rpx;
				font-weight: 600;
				line-height: 40rpx;
				padding: 30rpx;
			}
		}
	}
</style>